import { createContext, FC } from 'react';
import EditorWorkspace from './EditorWorkspace';
import useSetState, { SetState } from 'ahooks/lib/useSetState';
import Konva from 'konva';
import DrawTool from './DrawTool';
import GuildTool from './GuildTool';

interface CanvasContext {
    canvas: Konva.Stage | null;
    workspace: EditorWorkspace | null;
    drawMode: string;
    canvasLoading: boolean;
    title: string;
    drawTool: DrawTool | null;
    guildTool: GuildTool | null;
    shapes: any[];
    selectShapIds: string[];
    zoom: number;
    setState: SetState<CanvasContext>;
}

export const Context = createContext<CanvasContext>({
    canvas: null,
    workspace: null,
    drawMode: '',
    title: '',
    canvasLoading: false,
    drawTool: null,
    guildTool: null,
    shapes: [],
    selectShapIds: [],
    zoom: 1,
    setState: () => {},
});

export const CanvasProvider: FC = ({ children }) => {
    const [state, setState] = useSetState<Omit<CanvasContext, 'setState'>>({
        canvas: null,
        workspace: null,
        drawMode: '',
        canvasLoading: false,
        drawTool: null,
        guildTool: null,
        shapes: [],
        selectShapIds: [],
        zoom: 1,
        title: '',
    });

    const value: CanvasContext = {
        ...state,
        setState,
    };
    return <Context.Provider value={value}>{children}</Context.Provider>;
};
